import React, { Component } from 'react';
import {
	StyleSheet, Image, PixelRatio,
	Text, View, Dimensions,
	FlatList
} from "react-native";
import { style } from '../../../theme/style';


const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class MyListPage extends Component {

	constructor(props) {
		super(props);
	}
	_renderItem = (customer) => {
		let { orderId, createTime, price } = customer.item;
		return (
			<View style={[styles.list, styles.line, styles.listActive]}>
				<View style={{ flexDirection: 'row', alignItems: 'center' }}>
					<Image style={{ marginRight: 9 * scale }} source={require('../../../imgs/my-siter/listIcon.png')} />
					<View>
						<Text style={[styles.listText12]}>{orderId}</Text>
						<Text style={[styles.listText11, styles.lineHt]}>{createTime}</Text>
					</View>
				</View>
				<Text style={styles.listText12}>{price}</Text>
			</View>
		)
	}
	render () {
		let { listData } = this.props;
		return (
			<View>
				<FlatList data={listData} renderItem={(data) => this._renderItem(data)} />
			</View >
		)
	}
}

const styles = StyleSheet.create({
	line: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border
	},
	list: {
		flexDirection: 'row',
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		marginLeft: 15 * scale,
		marginRight: 15 * scale,
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	listText: {
		fontSize: 13 * scale,
		color: style.color.dark
	},
	listText12: {
		fontSize: 12 * scale,
		color: style.color.dark
	},
	listText11: {
		fontSize: 11 * scale,
		color: style.color.dark
	},
})